<!-- 权限管理的界面 -->
<template>
	<el-row>
		<el-col :span="8">
			<el-icon @click="insertdialogFormVisible=true">
				<Plus />
			</el-icon>
			<el-button @click="deptsDelete">
				批量删除
			</el-button>
		</el-col>
		<el-col :span="16">站位测试</el-col>
	</el-row>

	<!-- 显示数据库查询出来的所有部门信息 -->
	<el-table :data="subDepts" stripe style="width: 90%" @selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" />
		<el-table-column prop="dicName" label="字典的名称" />
		<el-table-column prop="dicDescribe" label="字典的描述" />
		<!-- <el-table-column prop="depType" label="部门类型" /> -->
		<!-- 		<el-table-column prop="phone" label="联系方式" /> -->
		<!-- <el-table-column prop="depDate" label="创建时间" /> -->
		<el-table-column>
			<template #default="scope">
				<el-button @click="saveDelete(scope.row.deptId)">
					<el-icon>
						<Delete />
					</el-icon>
				</el-button>
				<el-button @click="openUpdate(scope.row)">
					<el-icon>
						<EditPen />
					</el-icon>
				</el-button>
			</template>

		</el-table-column>
	</el-table>
	<!-- 分页 -->
	<el-row>
		<el-col :span="8"></el-col>
		<el-col :span="12">
			<el-pagination background layout="prev, pager, next" @current-change="doPaging" :page-size="pageSize"
				:total="depts.length" />
		</el-col>
	</el-row>
	<!-- 修改对话框 -->
	<el-dialog v-model="updatedialogFormVisible" title="修改部门">
		<el-form :label-position="labelposition" lable-width="100px" style="max-width: 350px;margin: 0px auto;">
			<el-form-item label="父级部门">
				<el-select v-model="updateDept.parentId" class="m-2" placeholder="Select">
					<el-option v-for="d in depts" :lable="d.deptName" :value="d.deptId" />
				</el-select>
			</el-form-item>

			<el-form-item label="请输入部门的名字">
				<el-input v-model="updateDept.deptName" placeholder="请输入部门的名字" />
			</el-form-item>

			<el-button @click="saveUpdate">确定</el-button>
			<el-button @click="updatedialogFormVisible=false">取消</el-button>
		</el-form>
	</el-dialog>

	<!-- 添加对话框 -->
	<el-dialog v-model="insertdialogFormVisible" title="添加部门">
		<el-form :label-position="labelposition" lable-width="100px" style="max-width: 350px;margin: 0px auto;">
			<el-form-item label="父级部门">
				<el-select v-model="addDept.parentId" class="m-2" placeholder="Select" value-key="deptId">
					<el-option v-for="d in depts" :value="d.deptId" :lable="d.deptName" />
				</el-select>
			</el-form-item>
			<el-form-item>
				请输入部门的名字:
				<el-input v-model="addDept.deptName" placeholder="请输入部门的名字" />
			</el-form-item>
			<el-button @click="saveInsert">确定</el-button>
			<el-button @click="insertdialogFormVisible=false">取消</el-button>
		</el-form>
	</el-dialog>
</template>

<script>
	import qs from 'qs'
	import {
		ElMessage
	} from 'element-plus'

	export default {
		data() {
			return {
				pageSize: 4,
				depts: [],
				subDepts: [],
				insertdialogFormVisible: false,
				updatedialogFormVisible: false,
				addDept: {},
				updateDept: {},
				deptIdArr: []
			}
		},
		methods: {
			doPaging(curr) {
				// 根据当前页  推算当前页应该显示第几行数据到第几行数据
				//  currPage  pagesize    start  to
				//    1			3			0	3
				// 	  2			3			3	6
				let start = (curr - 1) * this.pageSize
				let end = curr * this.pageSize
				this.subDepts = this.depts.slice(start, end)

			},
			deptsDelete() {
				let ids = []
				for (let i = 0; i < this.deptIdArr.length; i++) {
					ids.push(this.deptIdArr[i].deptId)
				}
				this.$axios.get("http://localhost:8080/dept/deleteDepts?ids=" + ids).then(function(res) {

				})
			},
			handleSelectionChange(arr) {
				this.deptIdArr = arr
			},
			saveDelete(did) {
				this.$axios.get("http://localhost:8080/dept/delete", {
					params: {
						deptId: did
					}
				}).then(function(res) {

				})

			},
			openUpdate(row) {
				this.updateDept = row
				this.updatedialogFormVisible = true
			},
			deptsList() {
				let that = this
				this.$axios.get("http://localhost:8080/dictionary/list").then(function(res) {
					console.log(res)
					that.depts = res.data
					that.subDepts = that.depts.slice(0, that.pageSize)
				})
			},
			saveUpdate() {

			},
			saveInsert() {
				let that = this
				let str = qs.stringify(that.addDept)
				this.$axios.get("http://localhost:8080/dept/insert?" + str).then(function(res) {
					if (res.data == true) {
						ElMessage({
							message: '添加成功！',
							type: 'success',
						})
						// 删除弹框的遮罩层
						that.insertdialogFormVisible = false
						that.deptsList()
					} else {
						ElMessage.error('添加失败！')
					}

				})
			}

		},
		created() {
			this.deptsList()
		}
	}
</script>

<style>
	.el-table {
		margin: 10px auto;
	}
</style>
